<template>
	<view>
		<!-- <image src="../../../static/logo/logo.png" class="logo" mode="widthFix"></image> -->
		<view class="content">
			<view>
				<input class="uni-input" @input="mobileInput" type="number" placeholder="您的手机号" placeholder-style="color:#bbb" style="background: transparent;" />
				<view class="webkit">
					<input type="text" class="flex" value="" @input="imgcodeInput" placeholder="图形验证码" placeholder-style="color:#bbb" />
					<image class="inputright" @click="changeImg" :src="'http://m.wpweipin.com/web/index.php?c=utility&a=code&r='+timestamp"></image>
				</view>
				<view class="webkit">
					<input type="number" @input="verify" class="flex" maxlength="5" value="" placeholder="5位短信验证码" placeholder-style="color:#bbb" />
					<button class="inputright" type="default" :disabled="codebtn" @click="getcode" v-cloak>{{codetext}}</button>
				</view>
				<input class="uni-input" @input="pwdInput" password type="text" placeholder="请输入新登录密码" placeholder-style="color:#bbb" style="background: transparent;" />
				<input class="uni-input" @input="pwd2Input" password type="text" placeholder="请确认新登录密码" placeholder-style="color:#bbb" style="background: transparent;" />
			</view>
			<button type="default" class="login-btn" @click="forget" :loading="loading" style="color:#fff;background: #2FA2FF;">立即找回</button>
			<view class="btn-group webkit" style="border: 0;">
				<view class="flex"></view>
				<button type="primary" @click="backlogin">返回登录</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				area:true,
				top: false,
				loading: false,
				codebtn: false,
				mobile: '',
				pwd: '',
				pwd1: '',
				imgcode: "",
				verifycode: '',
				codetext: '获取验证码',
				systemInfo:{},
				codenum: 60
			};
		},
		onLoad:function(){
			uni.getSystemInfo({
				success: (res) => {
					this.systemInfo = res
				}
			})
			var timestamp = (new Date()).getTime();
			this.timestamp = timestamp
		},
		methods:{
			change(e) {
				if (e.currentTarget.dataset.id == 1) {
					this.area = false
					this.top = true
				} else {
					uni.showToast({
						title: '请联系管理员',
						icon: "none"
					});
				}
			},
			backlogin() {
				uni.navigateBack();
			},
			forget(){
				if (this.mobile == "") {
					uni.showToast({
						title: '请输入手机号',
						icon: "none"
					});
				} else if (this.pwd == "") {
					uni.showToast({
						title: '请输入登录密码',
						icon: "none"
					});
				} else if (this.pwd1 == "") {
					uni.showToast({
						title: '请确认登录密码',
						icon: "none"
					});
				} else if (this.verifycode == "") {
					uni.showToast({
						title: '请输入短信验证码',
						icon: "none"
					});
				} else {
					this.loading = true
					uni.request({
						url: 'http://m.wpweipin.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=account.forget&type=0&app=1',
						method: 'POST',
						data: {
							mobile: this.mobile,
							pwd: this.pwd,
							pwd1: this.pwd1,
							verifycode: this.verifycode
						},
						header: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						success: res => {
							this.loading = false
							console.log(JSON.stringify(res)) 
							uni.showToast({
								title: res.data.result.message,
								icon: "none"
							});
							if (res.data.status == 1) {
								setTimeout(()=>{
									uni.reLaunch({
										url:"../login"
									})
								},1500)
							}
						},
						fail: () => {},
						complete: () => {}
					});
				}
			},
			mobileInput(e) {
				this.mobile = e.target.value
			},
			imgcodeInput(e) {
				this.imgcode = e.target.value
			},
			pwd2Input(e) {
				this.pwd1 = e.target.value
			},
			pwdInput(e) {
				this.pwd = e.target.value
			},
			verify(e) {
				this.verifycode = e.target.value
			},
			changeImg() {
				var timestamp = (new Date()).getTime();
				this.timestamp = timestamp
			},
			getcode(){
				if (this.mobile == "") {
					uni.showToast({
						title: '请输入手机号',
						icon: "none"
					});
				} else if (this.imgcode == "") {
					uni.showToast({
						title: '请输入图形验证码',
						icon: "none"
					});
				} else {
					uni.request({
						url: 'http://m.wpweipin.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=account.verifycode&app=1',
						method: 'POST',
						data: {
							mobile: this.mobile,
							temp: 'sms_forget',
							imgcode: this.imgcode
						},
						header: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						success: res => {
							uni.showToast({
								title: res.data.result.message,
								icon: "none"
							});
							if (res.data.status == 1) {
								this.codebtn = true
								var codetexts = setInterval(() => {
									this.codenum = this.codenum - 1
									this.codetext = this.codenum + 's'
								}, 1000)
								setTimeout(() => {
									this.codebtn = false
									clearInterval(codetexts);
									this.codetext = '重新发送'
								}, 60000)
							}
						},
						fail: () => {},
						complete: () => {}
					});
				}
			}
		}
	}
</script>

<style>
	page {background-color:#fff;}
	.logo {display:block;margin:0 auto 60upx;width: 200upx;margin-top: 100upx;}
	
.area.webkit {position:absolute;z-index:999;top:50%;margin-top:-280upx;border:0;}
.area view {width:280upx;height:280upx;border:2upx solid #aaa;box-sizing:border-box;border-radius:10px;padding-top:56upx;background:#FFFFFF0A;}
.area image {width:100upx;height:100upx;display:block;margin:0 auto;}
.area text {display:block;color:#aaa;text-align:center;margin-top:10upx;}
.top {width:180upx;height:180upx;border-radius:50%;-webkit-box-sizing:border-box;box-sizing:border-box;display:block;position:absolute;left:50%;margin-left:-90upx;top:-200upx;transition:.3s all;}
.register .top {top:200upx;}
.uni-list-cell {width:50%;padding:24upx 80upx;}
.uni-list-cell:after {display:none;}
.with-fun .uni-icon {width:40px;height:40px;line-height:40px;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}
.btn-group button {background:transparent;color:#aaa;font-size:28upx;margin:0;padding:0;opacity:.8;}
.btn-group button:after {display:none;}
input {padding:24upx;background:transparent;color:#aaa;border-bottom:1px solid #aaa;}
.login-btn {color:#aaa;border:2upx solid #aaa;background:transparent;height:84upx;line-height:84upx;font-size:28upx;margin-top:50upx;margin-bottom:10upx;}
.login-btn:after {display:none;}
uni-button[loading][type=default] {color:rgba(255,255,255,0.6);background-color:transparent;}
/* .content {position:absolute;width:100%;top:100%;transition:.3s all;} */
.register .content {top:400upx;padding:40upx;box-sizing:border-box;}
.inputright {width:200upx;height:52upx;margin-top:24upx;}
button.inputright {line-height:48upx;font-size:24upx;background:transparent;color:#aaa;border:2upx solid #aaa;}
input.flex {border:0;}
.webkit {border-bottom:1px solid #aaa;}
</style>
